<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    * {margin: 0; padding: 0;}
    :root {
        --device-width: 770px;
        --device-height: 1330px;
        --ui-width: 640px;
        font-size: 15px;
    }

    body {
        margin: 0;
        background-color: #000;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        min-height: 100vh;
        font-family: Helvetica;
        padding: 4rem 0;
    }
    h2 {
        color: #6e6e73;
        text-align: center;
        font-size: 4.5rem;
        font-weight: 600;
        margin: 6rem 0;
    }
    h2 p {
        margin: 0;
        color: #fff;
    }
    #iphone {
        position: relative;
        width: var(--device-width);
        height: var(--device-height);
    }

    #hardware {
        width: 100%;
        height: 100%;
        background-image: url(https://assets.codepen.io/2002878/iphone12-5g_on_phone.jpg);
        background-size: var(--device-width) var(--device-height);
        mask-image: url(https://assets.codepen.io/2002878/iphone12-5g_on_phone_mask.png);
        -webkit-mask-image: url(https://assets.codepen.io/2002878/iphone12-5g_on_phone_mask.png);
        mask-size: var(--device-width) var(--device-height);
        -webkit-mask-size: var(--device-width) var(--device-height);
    }
    #ui {
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
    }
    #ui .top-ui {
        display: block;
        width: var(--ui-width);
        height: auto;
        margin: 70px auto 0;
        padding-bottom: 30px;
        border-bottom: 1px solid #222;
    }
    #ui > ul {
        list-style: none;
        margin: 0;
        padding: 0;
        --progress: 0;
    }
    #ui ul li img {
        display: block;
        width: var(--ui-width);
        height: auto;
        margin: 10px auto;
        padding-bottom: 10px;
        border-bottom: 1px solid #222;
        /* 当progress为1的时候 scale 为1 translateY为0 opacity为1*/
        /* 当progress为0的时候 scale 为1.8 translateY为-60px opacity为0*/
        transform: scale(calc(1.8 - (0.8 * var(--progress)))) translateY(calc(-60px * (1 - var(--progress))));
        opacity: var(--progress);
    }
   
</style>
<body>
    <h2>
        supertast wriless
        <p> hello5g</p>
    </h2>

    <div id="iphone">
        <div id="hardware"></div>
        <div id="ui">
            <img src="https://assets.codepen.io/2002878/iphone12-5g_top_ui.jpg" alt="" class="top-ui">
            <ul>
                <li>
                    <img src="https://assets.codepen.io/2002878/iphone12-5g_show_01.jpg" alt="">
                </li>
                <li>
                    <img src="https://assets.codepen.io/2002878/iphone12-5g_show_02.jpg" alt="">
                </li>
                <li>
                    <img src="https://assets.codepen.io/2002878/iphone12-5g_show_03.jpg" alt="">
                </li>
                <li>
                    <img src="https://assets.codepen.io/2002878/iphone12-5g_show_04.jpg" alt="">
                </li>
                <li>
                    <img src="https://assets.codepen.io/2002878/iphone12-5g_show_05.jpg" alt="">
                </li>
                <li>
                    <img src="https://assets.codepen.io/2002878/iphone12-5g_show_06.jpg" alt="">
                </li>
                <li>
                    <img src="https://assets.codepen.io/2002878/iphone12-5g_show_07.jpg" alt="">
                </li>
            </ul>
        </div>
    </div>
</body>
<script>
    const rows = document.querySelectorAll('#ui ul li');

    const html = document.documentElement;

    document.addEventListener('scroll',(e) => {
        let scrolled = html.scrollTop / (html.scrollHeight - html.clientHeight);

        // scrollTop 滚动卷去的高度

        // scrollHeight 内容总高度 包括可滚动的部分

        // clientHeight 文档高度
        let total = 1 / rows.length; // 0.14
        console.log(scrolled)
        // 第一个li
        // scrolled = 0.087
        // start = 0
        // end = 0.14
        // progress = 0.087 / 0.14 = 0.62

        // 第二个li
        // scrolled = 0.087
        // start = 0.14
        // end = 0.28
        // progress = -0.053 / 0.14 = -0.37857
        for (const [index,value] of rows.entries()) {
            let start = total * index;

            let end = total * (index + 1);

            let progress = (scrolled - start) / (end - start)

            if (progress >= 1) progress = 1;

            if (progress <=0 ) progress = 0;

            value.style.setProperty('--progress',progress)
        }
    })
</script>
</html>